import { Table, Descriptions, Pagination } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import React, { useEffect, useState } from 'react';
import { orderCount, orderList } from '../../api/request';
import {RightOutlined,DownOutlined} from '@ant-design/icons';


const columns = [
    { title: '订单ID', dataIndex: 'unique_id' },
    { title: '总价格', dataIndex: 'total_amount' },
    { title: '订单状态', dataIndex: '' },
];
//     <Descriptions.Item label="用户名">{record.name}</Descriptions.Item>
    //     <Descriptions.Item label="收货地址">{record.item_id}</Descriptions.Item>
    //     <Descriptions.Item label="店铺地址">{record.description}</Descriptions.Item>
     // <Descriptions.Item label="店铺ID">{record.month_sales}</Descriptions.Item>
const add = (record: any) => (
    <Descriptions column={2}>
        <Descriptions.Item label="店铺名称">{record.restaurant_name}</Descriptions.Item>
    </Descriptions>
)

const App: React.FC = () => {

    const [data, setData] = useState([])
    const [count, setCount] = useState()
    //当前页
    const [Page, setPage] = useState(0)
    //每页条数
    const [PageSize, setPageSize] = useState(20)
    const onChange = (page: number, pageSize: number) => {
        setPage(() => page)
        setPageSize(() => pageSize)
    }

    useEffect(() => {

        orderList({
            offset: Page,
            limit: PageSize
        }).then(res => {
            console.log(res);
            setData(() => res.data)
        })

        orderCount().then(res => {
            // console.log(res);
            setCount(() => res.data.count)
        })

    }, [Page, PageSize])

    return (
        < Table
            columns={columns}
            expandable={{
                expandedRowRender: record => add(record),
                expandIcon: ({ expanded, onExpand, record }) =>
                    expanded ? (
                        <DownOutlined onClick={e => onExpand(record, e)} />
                    ) : (
                        <RightOutlined onClick={e => onExpand(record, e)} />
                    )
            }}

            dataSource={data}
            scroll={{ y: 430 }}
            pagination={
                {
                    total: count,
                    pageSize: PageSize,
                    onChange: (page, pageSize) => {
                        onChange(page, pageSize)
                    }
                }
            }
            rowKey={(render: any) => render._id}
        />

    )
}
    ;

export default App;